import React, { PureComponent } from "react";
import PropTypes from "prop-types";
import SyntaxHighlighter from "react-syntax-highlighter/dist/cjs/prism-light";
import coy from "react-syntax-highlighter/dist/cjs/styles/prism/coy";
import jsx from "react-syntax-highlighter/dist/cjs/languages/prism/jsx";
import javascript from "react-syntax-highlighter/dist/cjs/languages/prism/javascript";
import json from "react-syntax-highlighter/dist/cjs/languages/prism/json";
import less from "react-syntax-highlighter/dist/cjs/languages/prism/less";
import sass from "react-syntax-highlighter/dist/cjs/languages/prism/sass";
import scss from "react-syntax-highlighter/dist/cjs/languages/prism/scss";

// 注册markdown代码样式
SyntaxHighlighter.registerLanguage("jsx", jsx);
SyntaxHighlighter.registerLanguage("javascript", javascript);
SyntaxHighlighter.registerLanguage("json", json);
SyntaxHighlighter.registerLanguage("less", less);
SyntaxHighlighter.registerLanguage("sass", sass);
SyntaxHighlighter.registerLanguage("scss", scss);

class CodeBlock extends PureComponent {
	static propTypes = {
		value: PropTypes.string.isRequired,
		language: PropTypes.string
	};

	static defaultProps = {
		language: null
	};

	render() {
		const { language, value } = this.props;
		return (
			<figure className="highlight">
				<SyntaxHighlighter language={language} style={coy}>
					{value}
				</SyntaxHighlighter>
			</figure>
		);
	}
}

export default CodeBlock;
